<template>
  <!-- 背景 -->
  <div class="div">
    <!-- 导航 -->
    <nav-bar
      title="收藏"
      right-text="收藏的笔记"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      color="black"
    >
    </nav-bar>
    <!-- 内容 -->
    <!-- <grid :gutter="16" :column-num="1" id="lists"> -->
    <Card
      
      :title="i.homestaysName"
      :thumb="i.picture"
      v-for="i in lists"
      @click="toDetail(i.hid)"
      :price="i.price"
      :desc="i.roomType+'·'+i.bedNumber+'床'+'·'+i.personNumber+'人'"
    >
    <template #thumb>
      <img class="image" :src="i.picture" alt="">
      <img class="like" src="../imgs/心11.png" alt="">
    </template>
    
    <template #title>
      <h2>{{ i.homestaysName }}</h2>
    </template>
    <!-- <template #desc>
        <span>{{ i.roomType }}·3张床铺·{{ i.personNumber }}人</span>
    </template> -->
    <template #tags>
      <br><tag plain type="danger" >有停车位</tag>
    </template>
    <template #num>
      <p>{{i.score}}分</p>
    </template>
      <!-- <div class="txt">
        {{ i.homestaysName }} ￥{{ i.price }} {{ i.roomType }}
        {{ i.personNumber }}人
      </div> -->
    </Card>
    <!-- </grid> -->
  
  </div>
</template>
<script setup>
import { ref } from "vue";
import router from "../router";
import { Toast, NavBar,Button, Image, Grid, GridItem, Card,Tag } from "vant";
import { getCollectAPI } from "../services/collect";

// const router = Router();
// const app = createApp();
const lists = ref([])
// app.use(Toast);
// app.use(NavBar);
const onClickLeft = () => history.back()
const onClickRight = () => Toast('收藏的笔记')

getCollectAPI().then((res) => {
  lists.value = res.data;
  console.log(res.data);
});

const toDetail = (id) => {
  router.push({
    name: "Detail",
    query: {
      id,
    },
  });
};
</script>

<style scoped>
.van-card{
  background-color: #fff;
  height: 15vh;
  width: 96%;
  margin: 1% auto;
  padding:3%;
  box-shadow: 0 1px 5px #ccc;
}
.van-card_content{
  padding-left: 2vw;
}
.image {
  width: 30vw;
  height: 12vh;
  position: relative;
  margin-right: 2rem;
}
.like{
  position: absolute;
  top: 0;
  left: 0;
}

</style>
